Frontend Presentation API Skjermhåndtering: Konfigurasjon med Flere Skjermer for Globale Applikasjoner

I dagens sammenkoblede verden er webapplikasjoner ikke lenger begrenset til ett enkelt nettleservindu. Frontend Presentation API gir utviklere den kraftige muligheten til å utvide sine applikasjoner over flere skjermer, noe som åpner opp for en mengde muligheter for forbedrede brukeropplevelser. Denne guiden vil utforske finessene i Presentation API, med spesifikt fokus på konfigurasjon med flere skjermer, og gi praktiske eksempler som er relevante for et globalt publikum.

Forståelse av Presentation API

Presentation API er en webstandard som gjør det mulig for webapplikasjoner å bruke en sekundær skjerm, eller presentasjonsskjerm, til å vise annet innhold enn hovedskjermen. Dette er spesielt nyttig i scenarioer som:

• Konferanserom: Dele presentasjoner fra en bærbar PC til en projektor.
• Butikk-kiosker: Vise produktinformasjon på en stor skjerm mens en bruker samhandler med en mindre berøringsskjerm.
• Digital skilting: Sende dynamisk innhold på tvers av flere skjermer i offentlige rom.
• Spilling: Utvide spillopplevelsen til en sekundær skjerm for økt innlevelse eller for å gi tilleggsinformasjon.
• Utdanningssammenheng: Vise læremateriell på en stor skjerm mens studenter jobber på individuelle enheter.

API-et kretser rundt følgende nøkkelkonsepter:

• PresentationRequest: Et objekt som brukes til å starte en presentasjonsøkt.
• PresentationConnection: Et objekt som representerer forbindelsen mellom den kontrollerende siden og den presenterende siden.
• PresentationReceiver: Et objekt på den presenterende siden som mottar meldinger fra den kontrollerende siden.

Sette Opp Konfigurasjon med Flere Skjermer

Det første steget i å utnytte Presentation API er å oppdage tilgjengelige skjermer og starte en presentasjonsøkt. Her er en gjennomgang av prosessen:

1. Oppdage Tilgjengelige Skjermer

navigator.presentation.getAvailability()-metoden returnerer et promise som løses med et PresentationAvailability-objekt. Dette objektet indikerer om en presentasjonsskjerm er tilgjengelig for øyeblikket.

            
navigator.presentation.getAvailability()
  .then(function(availability) {
    if (availability.value) {
      console.log('Presentasjonsskjerm er tilgjengelig.');
    } else {
      console.log('Presentasjonsskjerm er ikke tilgjengelig.');
    }

    availability.onchange = function() {
      if (availability.value) {
        console.log('Presentasjonsskjerm ble tilgjengelig.');
      } else {
        console.log('Presentasjonsskjerm ble utilgjengelig.');
      }
    };
  });

            

              
                Copy
              
            
          

Dette kodeutdraget sjekker om en presentasjonsskjerm er tilgjengelig og lytter etter endringer i dens tilgjengelighet. Det er viktig å håndtere onchange-hendelsen for å reagere dynamisk på endringer i tilgjengeligheten til presentasjonsskjermer.

2. Starte en Presentasjonsøkt

For å starte en presentasjon, opprett et PresentationRequest-objekt, og oppgi URL-en til presentasjonssiden.

            
let presentationRequest = new PresentationRequest(['presentation.html']);

presentationRequest.start()
  .then(function(connection) {
    console.log('Presentasjonen startet vellykket.');
    // Håndter presentasjonstilkoblingen
    connection.onmessage = function(event) {
      console.log('Melding mottatt:', event.data);
    };
    connection.onclose = function() {
      console.log('Presentasjonen ble lukket.');
    };
    connection.onerror = function(event) {
      console.error('Presentasjonsfeil:', event.error);
    };
  })
  .catch(function(error) {
    console.error('Kunne ikke starte presentasjonen:', error);
  });

            

              
                Copy
              
            
          

Denne koden initialiserer en presentasjonsøkt ved å bruke presentation.html som innholdet som skal vises på den sekundære skjermen. Den etablerer deretter en tilkobling og setter opp hendelseslyttere for meldinger, lukking og feil.

3. Presentasjonssiden (PresentationReceiver)

Presentasjonssiden må være forberedt på å motta meldinger fra den kontrollerende siden. Dette oppnås ved hjelp av PresentationReceiver-objektet.

            
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    console.log('Mottok tilkobling:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });

  connectionList.onconnectionavailable = function(event) {
    let connection = event.connection;
    console.log('Ny tilkobling tilgjengelig:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  };
});

            

              
                Copy
              
            
          

Dette kodeutdraget lytter etter innkommende tilkoblinger på presentasjonsmottakersiden og håndterer meldinger mottatt fra den kontrollerende siden, og oppdaterer innholdet på presentasjonsskjermen deretter.

Avansert Konfigurasjon med Flere Skjermer

Utover grunnleggende presentasjonsfunksjonalitet, tillater Presentation API mer komplekse konfigurasjoner med flere skjermer. Her er noen avanserte teknikker:

1. Velge en Spesifikk Skjerm

Presentation API gir ikke en direkte måte å liste opp tilgjengelige skjermer og velge en spesifikk en. Du kan imidlertid bruke PresentationRequest-konstruktøren med en rekke URL-er. Brukeragenten vil da presentere en velger for brukeren, slik at de kan velge hvilken skjerm som skal brukes.

2. Dynamiske Innholdsoppdateringer

PresentationConnection.postMessage()-metoden muliggjør sanntidskommunikasjon mellom den kontrollerende siden og presentasjonssiden. Dette tillater dynamiske oppdateringer av presentasjonsinnholdet basert på brukerinteraksjoner eller dataendringer.

            
// Sender en melding fra den kontrollerende siden
connection.postMessage('Hei, presentasjonsskjerm!');

// Mottar meldingen på presentasjonssiden
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });
});

            

              
                Copy
              
            
          

Dette eksemplet demonstrerer sending av en enkel tekstmelding fra den kontrollerende siden til presentasjonssiden, som deretter oppdaterer innholdet sitt.

3. Håndtering av Forskjellige Skjermoppløsninger og Sideforhold

Når du presenterer innhold på flere skjermer, er det avgjørende å ta hensyn til de forskjellige oppløsningene og sideforholdene på skjermene. Bruk CSS media queries og fleksible layouter for å sikre at innholdet ditt tilpasser seg elegant til ulike skjermstørrelser. Vurder å bruke viewport-enheter (vw, vh, vmin, vmax) for å skalere elementer proporsjonalt med skjermstørrelsen.

            
/* Eksempel-CSS for håndtering av forskjellige skjermstørrelser */
@media (min-aspect-ratio: 16/9) {
  .content {
    width: 80vw;
    height: 90vh;
  }
}

@media (max-aspect-ratio: 4/3) {
  .content {
    width: 90vw;
    height: 75vh;
  }
}

            

              
                Copy
              
            
          

Dette CSS-eksemplet bruker media queries for å justere dimensjonene til et innholdselement basert på skjermens sideforhold.

4. Internasjonalisering og Lokalisering

For globale applikasjoner er det viktig å vurdere internasjonalisering (i18n) og lokalisering (l10n). Bruk passende språkkoder i HTML-koden din, sørg for oversettelser av alt tekstinnhold, og formater datoer, tall og valutaer i henhold til brukerens locale. Internationalization API (Intl) i JavaScript kan være svært nyttig for dette.

            
// Formaterer et tall i henhold til en spesifikk locale
let number = 1234567.89;
let formattedNumber = new Intl.NumberFormat('de-DE').format(number); // Utdata: 1.234.567,89

// Formaterer en dato i henhold til en spesifikk locale
let date = new Date();
let formattedDate = new Intl.DateTimeFormat('ja-JP').format(date); // Utdata: 2023/10/27

            

              
                Copy
              
            
          

Disse eksemplene viser hvordan man formaterer tall og datoer i henhold til forskjellige locales ved hjelp av Intl API.

5. Hensyn til Tilgjengelighet

Sørg for at dine flerskjerms-applikasjoner er tilgjengelige for brukere med nedsatt funksjonsevne. Gi alternativ tekst for bilder, bruk semantisk HTML, og sørg for at applikasjonen kan navigeres med tastaturet. Vurder å bruke ARIA-attributter for å forbedre tilgjengeligheten til dynamisk innhold.

Praktiske Eksempler for Globale Applikasjoner

Her er noen praktiske eksempler på hvordan Presentation API kan brukes i globale applikasjoner:

• Internasjonale Konferansepresentasjoner: En webapplikasjon som lar foredragsholdere dele lysbilder på en projektor mens de ser på talenotater og styrer presentasjonen på sin bærbare PC. Applikasjonen bør støtte flere språk og la foredragsholdere tilpasse presentasjonsoppsettet for forskjellige skjermstørrelser.
• Globale Butikk-kiosker: En kioskapplikasjon som viser produktinformasjon på en stor skjerm mens den lar brukere bla gjennom produkter og foreta kjøp på en berøringsskjerm. Applikasjonen bør støtte flere valutaer, språk og betalingsmåter.
• Flerspråklig Digital Skilting: Et digitalt skiltingssystem som viser dynamisk innhold, som nyhetsoverskrifter, væroppdateringer og reklame, på flere skjermer i offentlige rom. Innholdet bør automatisk oversettes til det lokale språket for hver skjerm.
• Samarbeidende Whiteboard for Fjerntliggende Team: En nettbasert whiteboard-applikasjon som lar geografisk spredte team samarbeide i sanntid. En sekundær skjerm kan vise en zoomet visning av et spesifikt område, eller presentere ekstra referansemateriale.

Kodeeksempel: En Enkel Presentasjon med Dynamiske Oppdateringer

Her er et komplett kodeeksempel som demonstrerer en enkel presentasjon med dynamiske oppdateringer:

Kontrollerende Side (index.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Presentation API Eksempel</title>
</head>
<body>
  <h1>Kontrollerende Side</h1>
  <button id="startButton">Start Presentasjon</button>
  <input type="text" id="messageInput" placeholder="Skriv inn melding">
  <button id="sendMessageButton">Send Melding</button>

  <script>
    let connection;
    let presentationRequest = new PresentationRequest(['presentation.html']);

    document.getElementById('startButton').addEventListener('click', function() {
      presentationRequest.start()
        .then(function(conn) {
          connection = conn;
          console.log('Presentasjonen startet vellykket.');
          connection.onmessage = function(event) {
            console.log('Melding mottatt:', event.data);
          };
          connection.onclose = function() {
            console.log('Presentasjonen ble lukket.');
          };
          connection.onerror = function(event) {
            console.error('Presentasjonsfeil:', event.error);
          };
        })
        .catch(function(error) {
          console.error('Kunne ikke starte presentasjonen:', error);
        });
    });

    document.getElementById('sendMessageButton').addEventListener('click', function() {
      if (connection) {
        let message = document.getElementById('messageInput').value;
        connection.postMessage(message);
      } else {
        alert('Presentasjonen er ikke startet.');
      }
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Presentasjonsside (presentation.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Presentasjonsskjerm</title>
  <style>
    body {
      font-size: 2em;
      text-align: center;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <h1>Presentasjonsskjerm</h1>
  <div id="content"></div>

  <script>
    navigator.presentation.receiver.connectionList.then(function(connectionList) {
      connectionList.connections.forEach(function(connection) {
        console.log('Mottok tilkobling:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      });

      connectionList.onconnectionavailable = function(event) {
        let connection = event.connection;
        console.log('Ny tilkobling tilgjengelig:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      };
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Dette eksemplet lager en enkel kontrollerende side med en knapp for å starte presentasjonen og et tekstfelt og en knapp for å sende meldinger til presentasjonsskjermen. Presentasjonsskjermen mottar meldingene og oppdaterer innholdet sitt deretter.

Feilsøking av Vanlige Problemer

• Presentasjonsskjerm Ikke Oppdaget: Sørg for at en sekundær skjerm er tilkoblet og aktivert i operativsystemets innstillinger. Sjekk nettleserkompatibilitet og oppdater til den nyeste versjonen.
• Presentasjonen Starter Ikke: Bekreft at presentasjonens URL er korrekt og tilgjengelig. Sjekk for eventuelle feil i JavaScript-konsollen.
• Meldinger Blir Ikke Mottatt: Sørg for at PresentationConnection er riktig etablert og at onmessage-hendelseslytteren er riktig konfigurert på både den kontrollerende siden og presentasjonssiden.
• Cross-Origin Problemer: Hvis den kontrollerende siden og presentasjonssiden er hostet på forskjellige domener, sørg for at CORS (Cross-Origin Resource Sharing) er riktig konfigurert for å tillate kommunikasjon mellom opprinnelsene.

Fremtiden for Presentation API

Presentation API er en teknologi i kontinuerlig utvikling. Fremtidige forbedringer kan inkludere:

• Forbedret opplisting og valg av skjermer.
• Mer sofistikert kontroll over presentasjonsoppsett og styling.
• Forbedrede sikkerhetsfunksjoner.
• Integrasjon med andre web-API-er, som WebXR for utvidet og virtuell virkelighetsopplevelser.

Konklusjon

Frontend Presentation API gir en kraftig mekanisme for å utvide webapplikasjoner over flere skjermer, noe som muliggjør et bredt spekter av innovative brukeropplevelser. Ved å forstå kjernekonseptene i API-et og følge de beste praksisene som er beskrevet i denne guiden, kan utviklere lage engasjerende og effektive flerskjerms-applikasjoner for et globalt publikum. Fra internasjonale konferansepresentasjoner til flerspråklig digital skilting, mulighetene er uendelige. Omfavn kraften i Presentation API og lås opp potensialet til flerskjerms webapplikasjoner.